<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAddParamsGroup"
        >添加分组</el-button>
      </el-col>
    </el-row>

    <div class="row">
      <div v-if="paramsGroup.length == 0">暂无参数绑定</div>
      <div class="paramsGroup" v-else>
        <el-card class="group-card" :body-style="{ padding: '0px' }"
                 v-for="(group, index) in paramsGroup"
                 :key="index"
        >
          <div slot="header" class="clearfix">
            <span>{{group.groupName}}</span>
            <el-dropdown trigger="click" style="float: right; padding: 3px 0">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdateParamsGroup(group)"
                  >修改
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDeleteParamsGroup(group)"
                  >删除
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <template v-if="group.params && group.params.length > 0">
              <div
                v-for="(param, paramId) in group.params"
                :key="paramId"
                class="params"
              >
                <span>{{ param.paramName }}</span>

                <span>
                  <el-button type="text" size="small" @click="handleEditParams(group, param)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    style="color: #f56c6c"
                    @click="handleDeleteParam(param)"
                    >删除</el-button
                  >
                </span>
              </div>
            </template>
            <div v-else style="text-align:center;align-content: center;margin: 10px 0px">暂无数据...</div>
            <div style="text-align: center">
              <el-button
                type="text"
                plain
                size="mini"
                @click="handleAddParams(group)"
              >添加</el-button>
            </div>
        </el-card>
      </div>


    </div>

    <!-- 参数组 -->
    <el-dialog :title="title" :visible.sync="open" v-if="open" width="50%" @close="open = false" append-to-body>
      <el-form ref="form" :model="paramGroupForm" :rules="groupRules" label-width="90px">
        <el-form-item label="参数名称" prop="groupName">
          <el-input v-model="paramGroupForm.groupName" placeholder="请输入参数名称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitParamGroupForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 参数 -->
    <el-dialog :title="paramTitle" :visible.sync="paramOpen" v-if="paramOpen" width="50%" @close="paramOpen = false" append-to-body>
      <el-form ref="paramForm" :model="paramForm" :rules="paramRules" label-width="90px">
        <el-form-item label="参数名称" prop="paramName">
          <el-input v-model="paramForm.paramName" placeholder="请输入参数名称" />
        </el-form-item>
        <el-form-item label="可选值" prop="options">
          <el-select
            v-model="optionsValue"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择可选值"
            style="width: 100%"
            @change="handleChange">
            <el-option
              v-for="item in optionsOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项" prop="paramType">
          <el-checkbox label="必填" v-model="paramForm.required" :true-label="trueLabel" :false-label="falseLabel"></el-checkbox>
          <el-checkbox label="可索引" v-model="paramForm.isIndex" :true-label="trueLabel" :false-label="falseLabel"></el-checkbox>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input type="number" v-model="paramForm.sort" placeholder="请输入排序" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitParamForm">确 定</el-button>
        <el-button @click="paramOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listCategoryParamsGroup, addCategoryParamsGroup, editCategoryParamsGroup, delCategoryParamsGroup, } from "@/api/mall/goods/parameterGroup";
import { addCategoryParams, editCategoryParams, delCategoryParams, } from "@/api/mall/goods/parameter";


export default {
  name: "categoryParams",
  data() {
    return {
      submitLoading: false,
      /** 分类ID */
      categoryId: this.$route.query.categoryId,
      /** 参数组 */
      paramsGroup: [],
      /** 添加或编辑标识 */
      modalType: 0,
      /** 添加或编辑标题 */
      modalTitle: "",
      /** 参数添加或编辑弹出框 */
      dialogParamsVisible: false,
      /** 参数组添加或编辑弹出框 */
      dialogParamsGroupVisible: false,
      //参数表单
      paramForm: {
        sort: 1,
      },
      /** 参数值 **/
      ops: {
        options: [],
      },
      // 参数表单
      paramGroupForm: {
        categoryId: this.categoryId,
        groupName: ''
      },
      groupRules: {
        groupName: [
          { required: true, message: "参数名称不能为空", trigger: "blur" },
          { min: 1, max: 20, message: '参数名称必须小于20个字符', trigger: 'blur' }
        ],
      },
      paramRules: {
        paramName: [
          { required: true, message: "参数名称不能为空", trigger: "blur" },
          { min: 1, max: 20, message: '参数名称必须小于20个字符', trigger: 'blur' }
        ],
      },
      title: '',
      open: false,
      paramTitle: '',
      paramOpen: false,
      optionsValue: [],
      optionsOptions: [],
      trueLabel: 1,
      falseLabel: 0
    };
  },
  filters: {
    paramTypeFilter(val) {
      return val === 1 ? "输入项" : "选择项";
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    resetParam(group){
      this.paramForm = {
        paramName: "",
        paramType: 1,
        options: "",
        required: 0,
        isIndex: 0,
        sort: 0,
        groupId: group.groupId,
        categoryId: this.categoryId,
      };
      this.resetForm("paramForm");
    },
    //弹出添加参数框
    handleAddParams(group) {
      this.resetParam(group);
      this.paramTitle = "添加参数";
      this.paramOpen = true;
    },
    //弹出修改参数框
    handleEditParams(group, param) {
      console.log(group, param);
      this.resetParam(group);
      this.paramForm = {
        paramName: param.paramName,
        options: param.options.split(","),
        required: param.required,
        isIndex: param.isIndex,
        groupId: param.groupId || "",
        categoryId: param.categoryId || "",
        sort: param.sort || 1,
        id: param.id,
      };
      this.optionsOptions = this.paramForm.options;
      this.optionsValue = this.paramForm.options;
      this.paramTitle = "修改参数";
      this.paramOpen = true;
    },
    //弹出修改参数组框
    handleUpdateParamsGroup(group) {
      this.reset();
      this.paramGroupForm = {
        groupName: group.groupName,
        categoryId: this.categoryId,
        id: group.groupId,
      };
      this.title = "修改参数组";
      this.open = true;
    },
    // 添加参数
    handleAddParamsGroup() {
      this.reset();
      this.title = "添加参数组";
      this.open = true;
    },
    reset(){
      this.paramGroupForm = {
        categoryId: this.categoryId,
        groupName: '',
      };
      this.resetForm("form");
    },
    // 提交参数组
    submitParamGroupForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.paramGroupForm.id != null) {
            editCategoryParamsGroup(this.paramGroupForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCategoryParamsGroup(this.paramGroupForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    //保存参数
    submitParamForm() {
      this.$refs["paramForm"].validate(valid => {
        if (valid) {
          this.paramForm.options = this.optionsValue.join();
          if (this.paramForm.id != null) {
            editCategoryParams(this.paramForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.paramOpen = false;
              this.getList();
            });
          } else {
            addCategoryParams(this.paramForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.paramOpen = false;
              this.getList();
            });
          }
        }
      });
    },
    // 获取分类列表
    getList() {
      listCategoryParamsGroup(this.categoryId).then((res) => {
          this.paramsGroup = res.data;
      });
    },
    //删除参数方法
    handleDeleteParam(param) {
      this.$modal.confirm('是否确认删除"' + param.paramName + '"？').then(function() {
        return delCategoryParams(param.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除参数成功");
      }).catch(() => {});
    },
    //删除参数组方法
    handleDeleteParamsGroup(group) {
      const ids = group.groupId;
      this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function() {
        return delCategoryParamsGroup(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    handleChange(val){
      this.paramForm.options = val.join();
    }
  },

};
</script>
<style lang="scss">
.row {
  overflow: hidden;
  margin: 20px 0;
}

.params {
  align-items: center;
  display: flex;
  padding: 3px;
  background-color: #f5f7fa;
  font-size: 14px;
  justify-content: space-between;
}

.ivu-card-head {
  background-color: #f5f7fa;
}

.ivu-btn {
  font-size: 13px;
}

.paramsGroup {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  width: 100%;
}
  .group-card{
    width: 350px;
    margin: 7px
  }
</style>
